<template>
    <div class="body">
        <div class="qr-content">
            <div id="qrcode"></div>
            <p class="title">{{this.$store.getters.userInfo.username}}的志愿者二维码</p>
        </div>
    </div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
    data() {
        return {
            
        }
    },
    mounted () {
        this.qrcode();
    },
    methods:{
        qrcode() {
            let qrcode = new QRCode('qrcode', {
                width: 200,  
                height: 200,
                text: `${this.$store.getters.userInfo.id}`, // 二维码地址
                colorDark : "#000",
                colorLight : "#fff",
            })
        }
    }
}
</script>
<style scoped>
    .body{
        background: #eee;
        height: Calc(100vh - 3rem);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .qr-content{
        width: 80%;
        height: 50vh;
        background: #fff;
        border-radius: 0.4rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
    }
    .title{
        font-size: 1rem;
        font-weight: bolder;
    }
</style>